<template>
  <div class="game-master">
    <div class="head-view">
      <img src="@/assets/imgs/master_view/logo_img.png" alt="赛事logo">
      <h3>2025MSI</h3>
      <span class="time-text">2025.06.27 - 2025.07.14</span>
      <span class="icon-text">进行中</span>
    </div>

    <!-- 遍历三个不同的比赛部分 -->
    <div class="main-container" v-for="(section, index) in sections" :key="index">
      <div class="left-class">
        <div class="big-card">
          <p class="match-time">{{ section.matchTime }}</p>
          <div class="match-container">
            <div class="team">{{ section.team1 }}</div>
            <img :src="section.team1Logo" alt="队伍logo">
            <div class="vs-box">
              <span class="vs">VS</span>
              <button class="detail-btn">查看详情</button>
            </div>
            <div class="team">{{ section.team2 }}</div>
            <img :src="section.team2Logo" alt="队伍logo">
          </div>
        </div>
      </div>
      <div class="right-class">
        <div class="small-card">
          <div class="image-grid">
            <div class="image-item" v-for="(img, imgIndex) in section.imgs" :key="imgIndex">
              <img :src="img.url" :alt="'赛事图片' + (imgIndex + 1)">
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// 导入图片资源

import team1Logo from '@/assets/imgs/master_view/icons/img1.png'
import team2Logo from '@/assets/imgs/master_view/icons/img1.png'
import videoImg1 from '@/assets/imgs/master_view/video_img1.png'
import videoImg2 from '@/assets/imgs/master_view/video_img1.png'
import videoImg3 from '@/assets/imgs/master_view/video_img1.png'

// 定义三个不同的比赛部分数据
const sections = [
  {
    matchTime: '07-02 08:00 淘汰赛',
    team1: 'GEN',
    team2: 'G2',
    team1Logo: team1Logo,
    team2Logo: team2Logo,
    imgs: [
      { url: videoImg1 },
      { url: videoImg2 },
      { url: videoImg3 },
      { url: videoImg1 },
      { url: videoImg2 },
      { url: videoImg3 }
    ]
  },
  {
    matchTime: '07-03 10:00 半决赛',
    team1: 'T1',
    team2: 'JDG',
    team1Logo: team2Logo,
    team2Logo: team1Logo,
    imgs: [
      { url: videoImg2 },
      { url: videoImg3 },
      { url: videoImg1 },
      { url: videoImg2 },
      { url: videoImg3 },
      { url: videoImg1 }
    ]
  },
  {
    matchTime: '07-04 12:00 决赛',
    team1: 'BLG',
    team2: 'TES',
    team1Logo: team1Logo,
    team2Logo: team2Logo,
    imgs: [
      { url: videoImg3 },
      { url: videoImg1 },
      { url: videoImg2 },
      { url: videoImg3 },
      { url: videoImg1 },
      { url: videoImg2 }
    ]
  }
]
</script>

<style scoped lang="scss">
.game-master {
  padding: 30px;
  font-family: 'Microsoft YaHei', sans-serif;
  background-color: #f5f5f5;
  border-radius: 8px;

  .head-view {
    display: flex;
    align-items: center;
    margin-bottom: 20px;

    img {
      width: 40px;
      height: 40px;
    }

    h3 {
      margin-left: 8px;
      font-size: 20px;
      color: #333;
    }

    .time-text {
      margin-left: 8px;
      color: #999;
      font-size: 14px;
    }

    .icon-text {
      margin-left: 8px;
      color: #1e90ff;
      border: 1px solid #1e90ff;
      padding: 3px 6px;
      border-radius: 4px;
      font-size: 12px;
    }
  }

  .main-container {
    display: flex;
    margin-bottom: 20px;
    gap: 20px;

    &:last-child {
      margin-bottom: 0;
    }

    .left-class {
      flex: 4;

      .big-card {
        width: 100%;
        height: 300px;
        border-radius: 6px;
        background-color: #1e90ff;
        padding: 20px;
        color: white;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        .match-time {
          font-size: 14px;
          margin-bottom: 20px;
          color: rgba(255, 255, 255, 0.8);
        }

        .match-container {
          display: flex;
          justify-content: space-around;
          align-items: center;
          height: calc(100% - 40px);

          .team {
            font-size: 24px;
            font-weight: bold;
            flex: 1;
            text-align: center;
          }

          img {
            width: 40px;
            height: 40px;
            object-fit: contain;
          }

          .vs-box {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100px;

            .vs {
              font-size: 18px;
              margin-bottom: 10px;
              color: rgba(255, 255, 255, 0.7);
            }

            .detail-btn {
              background-color: rgba(255, 255, 255, 0.2);
              color: white;
              border: none;
              border-radius: 4px;
              padding: 5px 10px;
              font-size: 12px;
              cursor: pointer;
              transition: all 0.3s;

              &:hover {
                background-color: rgba(255, 255, 255, 0.3);
                transform: translateY(-2px);
              }
            }
          }
        }
      }
    }

    .right-class {
      flex: 6;

      .small-card {
        width: 100%;
        height: 300px;
        border-radius: 6px;
        background-color: white;
        padding: 20px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

        .image-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          grid-template-rows: repeat(2, 1fr);
          gap: 10px;
          height: 100%;

          .image-item {
            overflow: hidden;
            border-radius: 4px;
            transition: all 0.3s;
            cursor: pointer;

            &:hover {
              transform: scale(1.02);
              box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            }

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
              transition: transform 0.3s;
            }
          }
        }
      }
    }
  }
}
</style>
